extends templates/main.jade

block title
  | How to make a minimal website usable | xigoi

block content
  h1 How to make a minimal website usable
  p Minimal websites are cool. Most “modern” websites include a lot of unnecessary bloat with tons of tracking scripts and annoying layout elements that take up half of the page. It's nice to get rid of all of this fluff and build a website from the ground up. Even plain HTML is a big improvement; however, the resulting site will look quite ugly and have some usability problems. Here are some little bits of code that can be added to improve the experience without creating another overweight monster.

  h2 HTML

  h3 Character encoding
  p
    | ASCII has been obsolete for a long time. We need Unicode, especially if using a different language than English. Put this in your 
    code &lt;head&gt;
    |  to use the UTF-8 encoding:
    pre
      code.
        &lt;meta charset="utf-8"&gt;
  h3 Viewport
  p
    | By default, pages always display in a wide format designed for desktop computers. However, browsing on phones and other smaller screens is very common nowadays. To make the page work well on them, put this in your 
    code &lt;head&gt;
    |  :
    pre
      code.
        &lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt;
  h2 CSS
  h3 Maximum page width
  p
    | Just like there are small screens, there are also wide screens. And reading text is painful when it spans across your whole Full HD monitor. Consider setting a maximum width for your page like this:
    pre
      code.
        body {
          max-width: 800px;
          margin: auto;
        }
    | If you'd also like to prevent the page from hugging the edge of the screen on narrow devices, you can use something like this:
    pre
      code.
        body {
          width: min(800px, calc(100% - 8px));
          margin: auto;
        }
  h3 Line height
  p
    | Text is more readable if it's not tightly pressed on top of itself. Empirical observations suggest that 1.4 is the optimal line height:
    pre
      code.
        body {
          line-height: 1.4;
        }
  h3 Horizontal scrolling in code blocks
  p
    | If you're using 
    code &lt;pre&gt;
    |  elements on your page to include snippets of code, it can easily happen that they're too long to fit on the screen. The default behavior is to make the whole page wider, which is annoying when reading the text outside. Instead, you can allow the code blocks themselves to be scrolled horizontally without affecting what's around them:
    pre
      code.
        pre {
          overflow-x: auto;
        }
